<template>
    <div class="drug-wrap">
        <h1>药品信息</h1>
        <table class="table">
            <tr class="drug-th">
                <th>序号</th>
                <th>药品编码</th>
                <th>药品名称</th>
                <th>药品规格</th>
                <th>数量</th>
                <th>单位</th>
                <th>单价</th>
                <th>总价</th>
                <th>编辑</th>
            </tr>
            <!-- <tr>
                <td>1</td>
                <td>12123453</td>
                <td>头孢颗粒</td>
                <td>药品规格</td>
                <td>
                    <input type="text" class="addnumber">
                </td>
                <td>
                    <select class="addnum">
                        <option value="盒">盒</option>
                        <option value="袋">袋</option>
                        <option value="粒">粒</option>
                    </select>
                </td>
                <td>
                    <input type="text" class="addnumber">
                </td>
                <td>
                    <input type="text" class="addnumber">
                </td>
                <td>
                    <delete-outlined style="color:#666ee8;cursor: pointer;"/>
                </td>
            </tr> -->
            <tr v-for="(item, index) in drugMessage" :key="item.id">
                <td>{{ index + 1 }}</td>
                <td>{{ item.code }}</td>
                <td>{{ item.drugname }}</td>
                <td>药品规格</td>
                <td>
                    <input type="text" class="addnumber" v-model="item.num">
                </td>
                <td>
                    <select class="addnum">
                        <option value="盒">盒</option>
                        <option value="袋">袋</option>
                        <option value="粒">粒</option>
                    </select>
                </td>
                <td>
                    <input type="text" class="addnumber" v-model="item.price">
                </td>
                <td>
                    <input type="text" class="addnumber " :value="item.num * item.price">
                </td>
                <td>
                    <delete-outlined style="color:#666ee8;cursor: pointer;" @click="del(index)" />
                </td>
            </tr>
        </table>
        <div class="button-add">
            <!-- <a-button type="primary" :size="size" style="margin-left: 30px;">
                    <template #icon>
                        <plus-square-outlined class="adddrug" />
                    </template>
                    添加药品
            </a-button> -->
            <div>
                <a-button type="primary" @click="openButton">
                    <template #icon>
                        <plus-square-outlined class="adddrug" />
                    </template>
                    添加药品
                </a-button>
            </div>
        </div>
        <div class="drug-bottom">
            <div class="drugleftb">
                <a-button type="primary" :size="size" style="margin-left: 30px;">
                    <template #icon>
                        <plus-square-outlined class="adddrug" />
                    </template>
                    附加费用
                </a-button>
                操作员:<select>
                    <option value="王明阳">王明阳</option>
                    <option value="王铭">王铭</option>
                    <option value="刘翔">刘翔</option>
                </select>
            </div>
            <p>
                总计:<span>{{ totalMoney }}</span>元
            </p>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, reactive, computed, watchEffect } from 'vue'
import { DeleteOutlined, PlusSquareOutlined } from '@ant-design/icons-vue';
import type { SizeType } from 'ant-design-vue/es/config-provider'
import { buildSlots } from '@vue/compiler-core';
// import MyDialog from "./MyDialog.vue"
import Bus from "../../../mitt/index"
import { addDrug } from "@/api/VipApi"
import { isLogicalExpression } from '@babel/types';
// interface FormState {
//     code: string;
//     drugname: string;
//     number: number;
//     price:number
// }
// interface Data {
//     code: string
//     drugname: string
//     num: string
//     boxx:string
//     price:string
// }
export default defineComponent({
    components: { DeleteOutlined, PlusSquareOutlined },
    setup() {
        const drugnumber = ref(1)
        const visible = ref<boolean>(false);
        const del = (index: any) => {
            drugMessage.splice(index, 1)
        }
        const showModal = () => {
            visible.value = true;
        };

        const handleOk = (e: MouseEvent) => {
            console.log(e);
            visible.value = false;
        };
        const drugMessage: any[] = reactive([])

        // dialog添加和列表添加
        const addDrugfun1 = (res: any) => {
            // console.log(item);
            res.drugnumber = drugnumber.value;
            // item.price=34
            let findres = drugMessage.find((item: any) => {
                return item.id == res.id
            })
            if (findres) {
                findres.num++
            } else {
                drugMessage.push(res)
            }
        }
        const addDrugfun = (item: any) => {
            console.log("item", item);
            // item.price = item.price.number

            drugMessage.push(item)
        }

        let totalMoney = computed(() => {
            let money = 0
            drugMessage.forEach((item: any) => {
                money += item.num * item.price
            })
            return money
        })

        const openButton = () => {
            Bus.emit("showModal")
        }
        const shuaxin = () => {

        }
        const total = ref()
        const price = ref(10)
        onMounted(() => {
            Bus.on("addDrug", addDrugfun1)

            // 弹框传入table数据
            Bus.on("addDrugfun", addDrugfun)
            // drugMessage.push(res)
            // console.log(drugMessage);

            

        })



        return {
            size: ref<SizeType>('large'),
            visible,
            showModal,
            handleOk,
            addDrugfun,
            drugMessage,
            del,
            drugnumber,
            price,
            openButton,
            shuaxin,
            addDrugfun1,
            totalMoney
        }
    }
})
</script>

<style scoped lang="less">
.drug-wrap {
    width: 60%;
    height: 500px;
    border: 0px solid #ccc;
    box-shadow: -1px 0px 10px 2px #e6e7fb;
    border-radius: 10px;
    overflow: scroll;

    h1 {
        font-size: 25px;
        font-weight: bold;
        padding: 6px 0px 0px 20px;
    }

    .table {
        width: 100%;

        .drug-th {
            background-color: rgb(230, 231, 251);
            height: 40px;
            line-height: 40px
        }
    }

    .addnumber {
        width: 40px;
        height: 25px;
        border: 1px solid #ccc;
        border-radius: 4px;
        outline: none;
    }

    td {
        text-align: center;
    }

    tr {
        line-height: 40px
    }

    .addnum {
        border: 1px solid #ccc;
        width: 50px;
        border-radius: 4px;
        outline: none;
        color: #999;
    }

    .ant-btn-primary {
        background-color: #28d094;
        font-weight: bold;
    }

    .button-add {
        text-align: center;
        width: 100%;
        line-height: 295px;
    }

    .drug-bottom {
        display: flex;
        justify-content: space-between;

        p {
            margin-right: 20px;
            line-height: 40px;
            align-items: center;
        }
    }

}
</style>